{% extends 'view/base.html' %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
{#        <script src="{% static 'bootstrap/js/index.js' %}"></script>#}
        <meta charset="UTF-8">
        <title>{% block title %}日志查询首页{% endblock title %}</title>

    {% endblock head %}
</head>
{% block body %}
    <body style="background: url({% static 'bootstrap/img/shanshui.JPG' %})">

    <div class="col-lg-12" id="screen">
        <div class="col-lg-6" id="addCon" style="position: relative;top: 150px;left: 80px">
            <form action="{% url 'querylog:submit' %}">
                <div id="replaceDiv">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" style="margin-top: 5px">机器IP</label>
                        <input type="text" id="ip" name="ip"
                               style="margin-left: -10px;width: 256px;height: 30px" placeholder="请输入机器IP">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" style="margin-top: 5px">APIID</label>
                        <input type="text" id="apiid" name="apiid"
                               style="margin-left: -10px;width: 256px;height: 30px" placeholder="请输入APIID">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" style="margin-top: 5px">接口名</label>
                        <input type="text" id="interfacename" name="interfacename"
                               style="margin-left: -10px;width: 256px;height: 30px" placeholder="请输入接口名">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" style="margin-top: 5px">时间</label>
                        <input type="text" id="date" name="date"
                               style="margin-left: -10px;width: 256px;height: 30px" placeholder="请输入date,如2019070819">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" style="margin-top: 5px">特定时间</label>
                        <input type="text" id="requestTime" name="requestTime"
                               style="margin-left: -10px;width: 256px;height: 30px" placeholder="请输入time,如10">
                    </div>
                </div>


                <div class="form-group" style="margin-top: 40px;margin-left: 16px">

                    <label for="txt_departmentname">请选择查询内容</label>
                    <div>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadiosjson"
                                   value="1"
                                   checked onclick="queryinter()"> 查接口
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadiosxml"
                                   value="2" onclick="querychannel()">
                            查渠道
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadiosstring"
                                   value="3" onclick="encryption()">
                            查加密
                        </label>
                    </div>
                </div>
                <div class="form-group" style=" position:relative; margin-top: 40px;margin-left: 70px">
                    <button type="button" class="btn btn-primary" onclick="resetInput()">重置</button>
                    <button type="button" class="btn btn-primary" onclick="queryTest()">提交</button>
                </div>

            </form>

        </div>
        <div class="col-lg-6" id="col6" style="top: 140px">
            <div id="table-content">
                <table id="log_table" class="table table-bordered table-hover table-condensed">
                    <tr id="log_code"></tr>
                    <tbody id="log_tbody">
                    <tr id="log_cont"></tr>
                    </tbody>
                </table>

                <table id="db_table" class="table table-bordered table-hover table-condensed">
                    <tr id="db_code"></tr>
                    <tbody id="db_tbody">
                    <tr id="db_cont"></tr>
                    </tbody>
                </table>

            </div>


            <div class="layui-collapse" lay-accordion="" id="pannel-info" style="opacity: 0;">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="title-one"></h2>
                    <div class="layui-colla-content">
                        <p id="content-one">
                        </p>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="title-two"></h2>
                    <div class="layui-colla-content">
                        <p id="content-two">
                        </p>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="title-three"></h2>
                    <div class="layui-colla-content">
                        <p id="content-three">
                        </p>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" id="title-four"></h2>
                    <div class="layui-colla-content">
                        <p id="content-four">
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script type="application/javascript">
    layui.use(['element', 'layer'], function () {
            var element = layui.element;
            var layer = layui.layer;

            //监听折叠
            element.on('collapse(test)', function (data) {
                layer.msg('展开状态：' + data.show);
            });
        });

        function clear_toastr(time) {
            setTimeout(
                function () {
                    toastr.clear();
                }, time);
        }

        function resetInput() {
            queryType = $("input[name='optionsRadiosinline']:checked").val();
            dataInfo = {};
            if (queryType == '1') {
                $('#ip').val('');
                $('#interfacename').val('');
                $('#apiid').val('');
                $('#date').val('');
                $('#requestTime').val('');
            } else if (queryType == '2') {
                $('#interfacename').val('');
                $('#channelname').val('');
                $('#date').val('');
            } else if (queryType == '3') {
                $('#interfacename').val('');
                $('#ip').val('');
                $('#requestid').val('');
            }
        }

        function queryTest() {

            $.ajaxSetup({
                data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
            });
            queryType = $("input[name='optionsRadiosinline']:checked").val();
            dataInfo = {};
            if (queryType == '1') {
                dataInfo = {
                    'interfacename': $("input[name='interfacename']").val(),
                    'ip': $("input[name='ip']").val(),
                    'apiid': $("input[name='apiid']").val(),
                    'date': $("input[name='date']").val(),
                    'requesttime': $("input[name='requestTime']").val(),
                    'optionsRadiosinline': $("input[name='optionsRadiosinline']:checked").val()
                }
            } else if (queryType == '2') {
                dataInfo = {
                    'interfacename': $("input[name='interfacename']").val(),
                    'channelname': $("input[name='channelname']").val(),
                    'date': $("input[name='date']").val(),
                    'optionsRadiosinline': $("input[name='optionsRadiosinline']:checked").val()
                }
            } else if (queryType == '3') {
                dataInfo = {
                    'interfacename': $("input[name='interfacename']").val(),
                    'ip': $("input[name='ip']").val(),
                    'requestid': $("input[name='requestid']").val(),
                    'optionsRadiosinline': $("input[name='optionsRadiosinline']:checked").val()
                }
            }
            console.log(dataInfo);
            $.ajax({
                    //url: "{% url 'querylog:submit' %}",
                    url: "http://127.0.0.1:8000/querylog/submit",
                    type: 'POST',
                    dataType: 'json',
                    data: dataInfo,
                    success: function (data) {
                        log_th = '';
                        log_td = '';
                        db_th = '';
                        db_td = '';
                        if (data.code == 200) {
                            //数据提交成功，关闭模态框
                            toastr.info('数据查询成功');
                            clear_toastr(2500);
                        }
                        else if (data.code == 201) {
                            toastr.error('查询失败');
                        }
                        if (data.code == 1002) {
                            toastr.error(data.reason);
                        }
                        console.log(data);
                        if (data['queryType'] == '1') {
                            $('#log_table').append("<caption id = 'rizhi'>" + "日志" + "</caption>");
                            $('#db_table').append("<caption id = 'ku'>" + "数据库" + "</caption>");
                            console.log(data['logNum']);

                            for (var logkeys in data['logNum']) {
                                console.log(logkeys);
                                log_th += '<th>' + logkeys + '</th>';
                                log_td += '<td>' + data['logNum'][logkeys] + '</td>';
                            }
                            for (var logkeys in data['dbNum']) {
                                console.log(logkeys);
                                db_th += '<th>' + logkeys + '</th>';
                                db_td += '<td>' + data['dbNum'][logkeys] + '</td>';
                            }
                            $('#log_code').append(log_th);
                            $('#log_cont').append(log_td);
                            $('#db_code').append(db_th);
                            $('#db_cont').append(db_td);
                        }
                        ;
                        if (data['queryType'] == '2') {
                            $('#log_table').append("<caption id = 'rizhi'>" + "日志" + "</caption>");
                            $('#db_table').append("<caption id = 'ku'>" + "数据库" + "</caption>");
                            $('#log_code').empty();
                            $('#log_cont').empty();
                            $('#db_cont').empty();
                            $('#db_code').empty();
                            console.log(data);
                            for (var logkeys in data['logNum']) {
                                console.log(logkeys);
                                log_th += '<th>' + logkeys + '</th>';
                                log_td += '<td>' + data['logNum'][logkeys] + '</td>';
                            }
                            for (var logkeys in data['dbNum']) {
                                console.log(logkeys);
                                db_th += '<th>' + logkeys + '</th>';
                                db_td += '<td>' + data['dbNum'][logkeys] + '</td>';
                            }
                            $('#log_code').append(log_th);
                            $('#log_cont').append(log_td);
                            $('#db_code').append(db_th);
                            $('#db_cont').append(db_td);

                        } else if (data['queryType'] == '3') {
                            $('#table-content').remove();
                            $('#pannel-info').css('opacity', 1);
                            $('#title-one').append('facade');
                            $('#title-two').append('cloud');
                            $('#title-three').append('facade-225');
                            $('#title-four').append('cloud-225');
                            $('#content-one').append(data['facade']);
                            $('#content-two').append(data['cloud']);
                            $('#content-three').append(data['facade_225']);
                            $('#content-four').append(data['cloud_225']);
                            console.log(data);
                            console.log($('#title-one').text())
                        }
                    },
                    error: function (data) {
                        alert('这个data没有了')
                    }
                }
            );
        }

        function encryption() {
            if ($('#log_code').text() != "") {
                $('#rizhi').text('');
                $('#ku').text('');
                $('#log_code').empty();
                $('#log_cont').empty()
            } else if ($('#title-one').text() != "") {
                $('#pannel-info').css('opacity', 0);
                $('#title-one').text('');
                $('#title-two').text('');
                $('#title-three').text('');
                $('#title-four').text('');
                $('#content-one').text('');
                $('#content-two').text('');
                $('#content-three').text('');
                $('#content-four').text('');
            }
            var replaceDiv = document.getElementById('replaceDiv');
            var replaceContent = " <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">机器IP</label>\n" +
                "                        <input type=\"text\" id=\"ip\" name=\"ip\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"业务机器IP\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">接口名</label>\n" +
                "                        <input type=\"text\" id=\"interfacename\" name=\"interfacename\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入接口名\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">流水号</label>\n" +
                "                        <input type=\"text\" id=\"requestid\" name=\"requestid\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入RequestID\">\n" +
                "                    </div>\n" +
                "                ";
            $("#replaceDiv").empty();
            $("#replaceDiv").append(replaceContent)
        }

        function queryinter() {
            if ($('#log_code').text() != "") {
                $('#rizhi').text('');
                $('#ku').text('');
                $('#log_code').empty();
                $('#log_cont').empty()
            } else if ($('#title-one').text() != "") {
                $('#pannel-info').css('opacity', 0);
                $('#title-one').text('');
                $('#title-two').text('');
                $('#title-three').text('');
                $('#title-four').text('');
                $('#content-one').text('');
                $('#content-two').text('');
                $('#content-three').text('');
                $('#content-four').text('');
            }
            var replaceContent = "<div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">机器IP</label>\n" +
                "                        <input type=\"text\" id=\"ip\" name=\"ip\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入机器IP\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">APIID</label>\n" +
                "                        <input type=\"text\" id=\"apiid\" name=\"apiid\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入APIID\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">接口名</label>\n" +
                "                        <input type=\"text\" id=\"interfacename\" name=\"interfacename\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入接口名\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">时间</label>\n" +
                "                        <input type=\"text\" id=\"date\" name=\"date\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入date,如2019070819\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">特定时间</label>\n" +
                "                        <input type=\"text\" id=\"requestTime\" name=\"requestTime\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入time,如10\">\n" +
                "                    </div>";
            $("#replaceDiv").empty();
            $("#replaceDiv").append(replaceContent)
        }

        function querychannel() {
            if ($('#log_code').text() != "") {
                $('#rizhi').text('');
                $('#ku').text('');
                $('#log_code').empty();
                $('#log_cont').empty()
            } else if ($('#title-one').text() != "") {
                $('#pannel-info').css('opacity', 0);
                $('#title-one').text('');
                $('#title-two').text('');
                $('#title-three').text('');
                $('#title-four').text('');
                $('#content-one').text('');
                $('#content-two').text('');
                $('#content-three').text('');
                $('#content-four').text('');
            }
            var replaceDiv = document.getElementById('replaceDiv');
            var replaceContent = " <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">供应商</label>\n" +
                "                        <input type=\"text\" id=\"channelname\" name=\"channelname\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入渠道简称\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">接口名</label>\n" +
                "                        <input type=\"text\" id=\"interfacename\" name=\"interfacename\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入接口名\">\n" +
                "                    </div>\n" +
                "                    <div class=\"form-group\">\n" +
                "                        <label for=\"inputEmail3\" class=\"col-sm-2 control-label\" style=\"margin-top: 5px\">查询时间</label>\n" +
                "                        <input type=\"text\" id=\"date\" name=\"date\"\n" +
                "                               style=\"margin-left: -10px;width: 256px;height: 30px\" placeholder=\"请输入date,如2019070819\">\n" +
                "                    </div>\n" +
                "                ";
            $("#replaceDiv").empty();
            $("#replaceDiv").append(replaceContent)
        }

    </script>
    </body>
{% endblock body %}
</html>